<template>
    <div class="madp-product-management">
        <basic-container>
            <!--顶部搜索表单-->
            <div class="madp-product-management-search">
                <el-form ref="searchForm" :model="searchForm" label-width="85px">
                    <el-form-item label="产品名称:" prop="name">
                        <el-input placeholder="请输入产品名称" @input="searchForm.name = searchForm.name.replace(/\s+/g, '')" v-model.trim="searchForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="产品状态:" prop="status">
                        <el-select v-model="searchForm.status" placeholder="请选择">
                            <el-option v-for="item in productStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="可用部门:" prop="department">
                        <!-- 选择企业部门组件 -->
                        <SelectDepartment ref="selectDep" :departmentData="departmentData" :defaultProps="defaultProps" :defaultMultipleValue="defaultMultipleValue"></SelectDepartment>
                    </el-form-item>
                    <el-form-item class="madp-item-btn">
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button @click="handleClear">清空</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="madp-synchronous-btn">
                <el-button type="primary" @click="handleAddProduct">新增产品</el-button>
            </div>
            <!--table-->
            <div class="madp-product-content">
                <div class="madp-add-category">
                    <el-button type="text" icon="el-icon-plus" size="medium" @click="handleAddCategory">添加分类</el-button>
                    <ul>
                        <li
                            :style="
                                active === index
                                    ? {
                                          background: theme,
                                          color: '#fff'
                                      }
                                    : {}
                            "
                            v-for="(item, index) in category"
                            :key="index"
                            @click="handleCategory(index, item.id)"
                        >
                            <span>{{ item.name }}</span>
                            <el-popover placement="right" width="auto" trigger="click">
                                <div class="madp-popover">
                                    <el-button type="text" icon="el-icon-edit" @click="handleEditCategory(item)">修改</el-button>
                                    <el-button type="text" icon="el-icon-delete" @click="handleDeleteCategory(item)">删除</el-button>
                                </div>
                                <i slot="reference" v-if="item.id !== null && item.id > 2" class="el-icon-s-operation"></i>
                            </el-popover>
                        </li>
                    </ul>
                </div>
                <div class="madp-product-table">
                    <el-table
                        :header-cell-style="{
                            background: 'rgb(255, 191, 191)',
                            color: 'rgb(44,44,44)'
                        }"
                        stripe
                        :data="productData"
                        v-loading="loadingList"
                    >
                        <el-table-column prop="id" align="center" label="产品编号" width="120"></el-table-column>
                        <el-table-column prop="name" align="center" label="产品名称"></el-table-column>
                        <el-table-column prop="selection" align="center" label="精选标识" width="120">
                            <template slot-scope="scope">
                                <el-switch v-model="scope.row.selection" active-value="1" inactive-value="0" @change="handleChangeSelect(scope.row.id)"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sort" align="center" label="排序"></el-table-column>
                        <el-table-column prop="status" align="center" label="产品状态" width="100">
                            <template slot-scope="scope">
                                {{ scope.row.status === '1' ? '已发布' : '未发布' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="startTime" align="center" label="开始时间"></el-table-column>
                        <el-table-column prop="endTime" align="center" label="结束时间"></el-table-column>
                        <el-table-column align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleShelves(scope.row)">
                                    <span v-if="scope.row.status === '0'">上架</span>
                                    <span v-else>下架</span>
                                </el-button>
                                <el-button type="text" @click="handleDetails(scope.row)">查看</el-button>
                                <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                                <el-button type="text" @click="handleDelete(scope.row)" v-if="scope.row.status === '0'">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="madp-table-page">
                        <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page.currentPage"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="page.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page.total"
                            style="float: right"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </basic-container>
        <!-- 新建分类弹框 开始 -->
        <el-dialog :title="categoryTitle" :visible.sync="categoryShow" :close-on-click-modal="false" :before-close="handleCancelCategory" append-to-body width="50%">
            <div class="madp-category-content">
                <div>新增可见范围设置，管理员可根据不同选择展示不同产品，部门管理员可创建部门可见的产品。</div>
                <div style="margin-top: 20px">
                    <el-form ref="addCategoryData" :model="addCategoryData" :rules="categoryRules" label-width="140px">
                        <el-form-item prop="name" label="分类名称:">
                            <el-input v-model.trim="addCategoryData.name" placeholder="请输入分类名称" @input="addCategoryData.name = addCategoryData.name.replace(/\s+/g, '')"></el-input>
                        </el-form-item>
                        <el-form-item label="可见范围:" prop="visibleRange">
                            <el-radio-group v-model="addCategoryData.visibleRange">
                                <el-radio :label="1">全部部门</el-radio>
                                <el-radio :label="2">部门可见</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="选择可用部门:" prop="selectDepartment" v-if="addCategoryData.visibleRange === 2">
                            <!-- 选择企业部门组件 -->
                            <!--获取部门name => this.$refs.selectDep.value; 获取部门id => this.$refs.selectDep.getCheckedKeys()-->
                            <SelectDepartment
                                ref="selectDep"
                                :multiple="true"
                                :departmentData="departmentData"
                                :defaultProps="defaultProps"
                                :defaultMultipleValue="defaultMultipleValue"
                            ></SelectDepartment>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="handleCancelCategory()">取消</el-button>
                <el-button type="primary" :loading="categoryLoading" @click="handleCategoryConfirm">确定</el-button>
            </div>
        </el-dialog>
        <!-- 新建分类弹框 结束 -->
        <!-- 新增产品弹框 开始 -->
        <el-dialog :title="productDialogTitle" :visible="addProductShow" :close-on-click-modal="false" :before-close="handleCancelProduct" top="4vh" append-to-body width="50%">
            <div class="madp-add-product-content">
                <el-form ref="addProductData" :model="addProductData" :rules="rules" label-width="130px">
                    <div class="madp-product">
                        <el-form-item prop="groupId" label="产品类别:">
                            <el-select v-model="addProductData.groupId" :disabled="productDialogTitle === '查看产品'" placeholder="请选择产品类别">
                                <el-option v-for="item in categoryData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品排序:" prop="sort">
                            <el-input
                                v-model="addProductData.sort"
                                placeholder="请输入产品排序"
                                maxlength="5"
                                :disabled="productDialogTitle === '查看产品'"
                                @input="addProductData.sort = addProductData.sort.replace(/[^\d+]/g, '')"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <el-form-item label="产品名称:" prop="name">
                        <el-input
                            v-model="addProductData.name"
                            placeholder="请输入产品名称"
                            maxlength="25"
                            :disabled="productDialogTitle === '查看产品'"
                            @input="addProductData.name = addProductData.name.replace(/\s+/g, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="精选标识:" prop="selection">
                        <el-switch v-model="addProductData.selection" :disabled="productDialogTitle === '查看产品'"></el-switch>
                    </el-form-item>
                    <el-form-item label="产品描述①:" prop="desc1">
                        <el-input
                            v-model="addProductData.desc1"
                            placeholder="若百分比、浮点数和文字一同输入,中间用竖线隔开,例如:2.57%|七日年化"
                            maxlength="15"
                            :disabled="productDialogTitle === '查看产品'"
                            @input="addProductData.desc1 = addProductData.desc1.replace(/\s+/g, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="产品描述②:" prop="desc2">
                        <el-input
                            v-model="addProductData.desc2"
                            placeholder="若百分比、浮点数和文字一同输入,中间用竖线隔开,例如:2.57%|七日年化"
                            maxlength="15"
                            :disabled="productDialogTitle === '查看产品'"
                            @input="addProductData.desc2 = addProductData.desc2.replace(/\s+/g, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="产品描述③:" prop="desc3">
                        <el-input
                            v-model="addProductData.desc3"
                            placeholder="若百分比、浮点数和文字一同输入,中间用竖线隔开,例如:2.57%|七日年化"
                            maxlength="15"
                            :disabled="productDialogTitle === '查看产品'"
                            @input="addProductData.desc3 = addProductData.desc3.replace(/\s+/g, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="产品链接:" prop="url">
                        <el-input
                            v-model="addProductData.url"
                            placeholder="请输入产品链接"
                            :disabled="productDialogTitle === '查看产品'"
                            maxlength="253"
                            @input="addProductData.url = addProductData.url.replace(/\s+/g, '')"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="开始结束时间:" prop="time">
                        <el-date-picker
                            v-model="addProductData.time"
                            :disabled="productDialogTitle === '查看产品'"
                            :picker-options="{
                                disabledDate(time) {
                                    return time.getTime() < Date.now() - 8.64e7;
                                }
                            }"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <div v-if="view">
                    <el-button @click="handleCancelProduct">取消</el-button>
                    <el-button type="primary" @click="handleConfirmProduct">确定</el-button>
                </div>
                <div v-else>
                    <el-button @click="handleCancelProduct">关闭</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 新增产品弹框 结束 -->
    </div>
</template>

<script>
import SelectDepartment from '@/components/wechat/select-department';
import { dateFormat } from '@/util/date';
import { postProductGroup, getProductGroup, deleteProductGroup, putProductGroup } from '@/api/product-manage/product-group';
import { postProduct, getProduct, putProduct, deleteProduct, postPublish, postPublishOff, postProductSelection } from '@/api/product-manage/product';
import { getDepartmentList } from '@/api/common-interface/department';
import { mapGetters } from 'vuex';
export default {
    name: 'index',
    components: { SelectDepartment },
    data() {
        let urlCheck = (rule, value, callback) => {
            // if (
            //     value.startsWith('http') ||
            //     value.startsWith('https') ||
            //     value.startsWith('HTTP') ||
            //     value.startsWith('HTTPS')
            // ) {
            //     callback()
            // } else {
            //     callback(new Error('请输入正确的链接地址'))
            // }
            callback();
        };
        return {
            loadingList: true,
            /*添加企业数据*/
            defaultProps: {
                value: 'id', // ID字段名
                label: 'name', // 显示名称
                children: 'son' // 子级字段名
            },
            departmentData: [],
            //初始值
            defaultMultipleValue: [],

            /*搜索表单数据*/
            searchForm: {
                name: '',
                status: '',
                department: ''
            },
            productStatus: [{ label: '请选择', value: '' }, { label: '未发布', value: '0' }, { label: '已发布', value: '1' }],
            depOptions: [{ value: '全部部门' }],

            /*表格和分类数据*/
            category: [],
            categoryData: [],
            active: 0,
            productData: [],
            // 分页
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },
            //分类id 默认是全部分类
            groupId: null,

            /*新建分类数据*/
            categoryTitle: '',
            categoryShow: false,
            addCategoryData: {
                name: '',
                // scopeType: 0,
                visibleRange: 1,
                // scopeList: "",
                deptList: []
            },
            categoryRules: {
                name: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        trigger: 'blur'
                    },
                    {
                        min: 2,
                        max: 6,
                        message: '请输入2-6个字符',
                        trigger: 'change'
                    }
                ],
                visibleRange: {
                    required: true,
                    message: '请选择可见范围',
                    trigger: 'change'
                },
                selectDepartment: {
                    required: false,
                    message: '请选择可用部门',
                    trigger: 'change'
                }
            },
            categoryLoading: false,

            /*新增产品数据*/
            productDialogTitle: '',
            addProductShow: false,
            addProductData: {
                groupId: '',
                sort: '',
                name: '',
                selection: false,
                desc1: '',
                desc2: '',
                desc3: '',
                url: '',
                time: []
            },
            rules: {
                groupId: {
                    required: true,
                    message: '请选择产品类别',
                    trigger: 'change'
                },
                sort: {
                    required: true,
                    message: '请输入产品排序',
                    trigger: 'blur'
                },
                name: {
                    required: true,
                    message: '请输入产品名称',
                    trigger: 'blur'
                },
                selection: {
                    required: true,
                    message: '请选择精选标识',
                    trigger: 'change'
                },
                desc1: {
                    required: true,
                    message: '请输入产品描述①',
                    trigger: 'blur'
                },
                desc2: {
                    required: true,
                    message: '请输入产品描述②',
                    trigger: 'blur'
                },
                desc3: {
                    required: true,
                    message: '请输入产品描述③',
                    trigger: 'blur'
                },
                url: [
                    {
                        required: true,
                        message: '请输入产品链接',
                        trigger: 'blur'
                    },
                    { validator: urlCheck, trigger: 'blur' }
                ],
                time: {
                    required: true,
                    message: '请选择开始结束时间',
                    trigger: 'blur'
                }
            },
            view: true
        };
    },
    mounted() {
        this.getCategory();
        this.getList(this.page);
        this.fetchDepList();
    },
    computed: {
        ...mapGetters(['theme'])
    },
    methods: {
        /*获取部门列表数据*/
        fetchDepList() {
            getDepartmentList().then((res) => {
                if (res.data.code === 0) {
                    this.departmentData = res.data.data.department;
                }
            });
        },
        /*获取产品列表*/
        getList(page, params) {
            this.loadingList = true;
            let obj = Object.assign({ current: page.currentPage, size: page.pageSize }, { ...params, ...this.searchForm });
            getProduct(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.productData = res.data.data.records;
                        this.page.total = res.data.data.total;
                    }
                    this.loadingList = false;
                })
                .catch(() => {});
        },
        /*获取分类列表*/
        getCategory() {
            getProductGroup()
                .then((res) => {
                    if (res.data.code === 0) {
                        let category = [{ name: '全部分类', id: null }];
                        this.category = category.concat(res.data.data);
                        this.categoryData = res.data.data && res.data.data.filter((item) => item.id !== 2);
                    }
                })
                .catch(() => {});
        },
        /*
         * 表格操作 handleEdit(编辑)\handleDelete(删除)\handleShelves(上架)\handleDetails(查看)\handleChangeSelect(精选)
         * */
        handleEdit(data) {
            this.productDialogTitle = '编辑产品';
            this.addProductShow = true;
            this.$nextTick(() => {
                let obj = JSON.parse(JSON.stringify(data));
                obj.time = [new Date(obj.startTime), new Date(obj.endTime)];
                obj.selection = obj.selection !== '0';
                this.addProductData = obj;
            });
        },
        handleDelete(data) {
            this.$confirm('确认后将会删除该产品，是否删除？', '温馨提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
            })
                .then(() => {
                    deleteProduct(data.id)
                        .then((res) => {
                            if (res.data.code === 0) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                });
                                this.getList(this.page, {
                                    groupId: this.groupId
                                });
                            }
                        })
                        .catch(() => {});
                })
                .catch(() => {});
        },
        handleShelves(data) {
            //status为0是未发布，为1是发布
            if (data.status === '1') {
                this.$confirm('确认后将会下架该产品，是否下架？', '温馨提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        postPublishOff(data.id)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '下架成功'
                                    });
                                    this.getList(this.page, {
                                        groupId: this.groupId
                                    });
                                }
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            } else {
                this.$confirm('确认后将会上架该产品，是否上架？', '温馨提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        postPublish(data.id).then((res) => {
                            if (res.data.code === 0) {
                                this.$message({
                                    type: 'success',
                                    message: '上架成功'
                                });
                                this.getList(this.page, {
                                    groupId: this.groupId
                                });
                            }
                        });
                    })
                    .catch(() => {});
            }
        },
        handleDetails(data) {
            this.productDialogTitle = '查看产品';
            this.addProductShow = true;
            this.view = false;
            this.$nextTick(() => {
                let obj = JSON.parse(JSON.stringify(data));
                obj.time = [new Date(obj.startTime), new Date(obj.endTime)];
                obj.selection = obj.selection !== '0';
                this.addProductData = obj;
            });
        },
        handleChangeSelect(id) {
            postProductSelection(id).then((res) => {
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    this.getList(this.page, { groupId: this.groupId });
                }
            });
        },
        /*
         * 新建产品 -> 确定、取消
         * */
        handleAddProduct() {
            this.addProductShow = true;
            this.productDialogTitle = '新增产品';
        },
        handleConfirmProduct() {
            this.$refs.addProductData.validate((valid) => {
                if (valid) {
                    let obj = { startTime: '', endTime: '' };
                    if (this.addProductData.time.length > 0) {
                        obj.startTime = dateFormat(this.addProductData.time[0]);
                        obj.endTime = dateFormat(this.addProductData.time[1]);
                    }
                    let newObj = Object.assign(this.addProductData, obj);
                    newObj.sort = Number(newObj.sort);
                    newObj.selection = newObj.selection === false ? '0' : '1';
                    // delete newObj.time
                    if (this.productDialogTitle === '新增产品') {
                        postProduct(newObj)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.addProductShow = false;
                                    this.$message({
                                        type: 'success',
                                        message: '新增成功'
                                    });
                                    if (this.$refs.addProductData) {
                                        this.$refs.addProductData.resetFields();
                                    }
                                    this.getList(this.page, {
                                        groupId: this.groupId
                                    });
                                }
                            })
                            .catch(() => {});
                    } else {
                        putProduct(newObj)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.addProductShow = false;
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功'
                                    });

                                    if (this.$refs.addCategoryData) {
                                        this.$refs.addCategoryData.resetFields();
                                    }
                                    this.getList(this.page, {
                                        groupId: this.groupId
                                    });
                                }
                            })
                            .catch(() => {});
                    }
                }
            });
            if (this.$refs.addCategoryData) {
                this.$refs.addCategoryData.resetFields();
            }
        },
        handleCancelProduct() {
            this.addProductShow = false;
            this.$refs.addProductData.resetFields();
            this.view = true;
        },
        /*
         * 分类修改、编辑 handleDeleteCategory(删除)\handleEditCategory(修改)
         * */
        handleEditCategory(data) {
            //加载部门
            this.fetchDepList();
            this.categoryTitle = '修改分类';
            this.categoryShow = true;
            this.defaultMultipleValue = data.deptList === [] ? [] : data.deptList;
            this.$nextTick(() => {
                this.addCategoryData = {
                    id: data.id,
                    name: data.name,
                    deptList: data.deptList,
                    visibleRange: data.visibleRange
                };
            });
        },
        handleDeleteCategory(data) {
            if (this.loadingList) return;
            if (this.page.total > 0) {
                this.$message.error('分类中存在产品，不可删除！');
            } else {
                this.$confirm('是否确认删除该分类？', '温馨提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消'
                })
                    .then(() => {
                        deleteProductGroup(data.id)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功'
                                    });
                                    //删除成功，默认为全部分类，重新加载分类列表和表格数据
                                    this.active = 0;
                                    this.getCategory();
                                    this.getList(this.page);
                                }
                            })
                            .catch(() => {});
                    })
                    .catch(() => {});
            }
        },
        /*
         * 新建分类 -> 确定、取消 handleAddCategory(新建)\handleCategoryConfirm(确定)\handleCancelCategory(取消)
         * */
        handleAddCategory() {
            this.categoryTitle = '新建分类';
            this.categoryShow = true;
            this.defaultMultipleValue = [];
            //加载部门
            this.fetchDepList();
        },
        handleCategoryConfirm() {
            this.$refs.addCategoryData.validate((validate) => {
                if (validate) {
                    this.categoryLoading = true;
                    if (this.addCategoryData.visibleRange === 2) {
                        //获取部门name => this.$refs.selectDep.value
                        //获取部门id => this.$refs.selectDep.getCheckedKeys()
                        this.addCategoryData.deptList = this.$refs.selectDep.getCheckedKeys();
                    }
                    if (this.categoryTitle === '新建分类') {
                        postProductGroup(this.addCategoryData)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '创建成功'
                                    });
                                    this.getCategory();
                                    this.categoryShow = false;
                                    this.$refs.addCategoryData.resetFields();
                                    this.addCategoryData.deptList = [];
                                }
                            })
                            .catch(() => {});
                        this.categoryLoading = false;
                    } else if (this.categoryTitle === '修改分类') {
                        if (this.addCategoryData.visibleRange === 1) {
                            this.addCategoryData.deptList = [];
                            this.defaultMultipleValue = [];
                        }
                        putProductGroup(this.addCategoryData)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功'
                                    });
                                    this.getCategory();
                                    this.categoryShow = false;
                                    this.$refs.addCategoryData.resetFields();
                                    this.addCategoryData.deptList = [];
                                }
                            })
                            .catch(() => {});
                        this.categoryLoading = false;
                    }
                }
            });
        },
        handleCancelCategory() {
            this.$refs.addCategoryData.resetFields();
            this.addCategoryData.deptList = [];
            this.categoryShow = false;
        },
        /*
         * 点击分类
         * */
        handleCategory(val, id) {
            this.active = val;
            this.groupId = id;
            this.page.currentPage = 1;
            this.getList(this.page, { groupId: id });
        },
        /*
         * 搜索
         * */
        handleSearch() {
            this.searchForm.department = this.$refs.selectDep.getCheckedKeys()[0];
            let obj = Object.assign({ groupId: this.groupId }, this.searchForm);
            this.page.currentPage = 1;
            this.getList(this.page, obj);
        },
        /*
         * 清空
         * */
        handleClear() {
            this.$refs.searchForm.resetFields();
            //清空可用部门组件的方法
            this.$refs.selectDep.clearHandle();

            this.getList(this.page, { groupId: this.groupId });
        },
        /**
         * 分页-改变每页记录条数触发查询
         **/
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.page.currentPage = 1;
            this.getList(this.page, { groupId: this.groupId });
        },
        /**
         * 分页-改变当前页码记录条数触发查询
         **/
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage;
            this.getList(this.page, { groupId: this.groupId });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-product-management {
    .madp-product-management-search {
        .el-form {
            display: flex;
            justify-content: flex-end;

            .el-form-item {
                margin-left: 1%;
            }
        }

        .madp-item-btn {
            /deep/ .el-form-item__content {
                display: flex;
                margin-left: 0 !important;
            }
        }
    }

    .madp-product-content {
        margin-top: 10px;
        display: flex;
        .madp-add-category {
            margin-right: 15px;
            padding-right: 10px;
            width: 120px;
            text-align: center;
            border-right: 1px solid #eeeeee;
            li {
                position: relative;
                padding: 5px 0;
                margin: 8px 0;
                border-radius: 3px;
                cursor: pointer;
                span:nth-child(2) {
                    position: absolute;
                    right: 5px;
                }
            }
            .madp-category-active {
                background: #409eff;
                color: #ffffff;
            }
        }
        .madp-product-table {
            flex: 1;
        }
    }
}
.madp-category-content {
    padding: 0 40px;
}
.madp-add-product-content {
    padding: 0 30px;
}
.madp-product {
    display: flex;
    justify-content: space-between;
}
.el-popover {
    .madp-popover {
        display: flex;
        flex-direction: column;
        /deep/.el-button {
            margin-left: 0;
        }
    }
}

/deep/ .el-date-editor .el-range-separator {
    width: 25px !important;
}
.madp-table-page {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}
</style>
